import React from 'react';
import { useState, useEffect } from 'react'
import Province from './sevices/api';
import { Table, Switch, Button, Form, Input, Checkbox, Modal, Popconfirm, message, Drawer } from 'antd'
import style from '../banner/style.module.scss'
const {changeimg} = style

const cancel = (e) => {
  console.log(e);
  message.error('Click on No');
};
const Banner = () => {
  const formRef = React.useRef(null);
  const change = () => {
    console.log(1);
  }
  
  const [val,setVal]=useState('')
  const [user, setUser] = useState({
    // key: Date.now(),
    // type: '别墅',
  })
  const [flag,setFlag]=useState(false)
  const[cateid,setCateid]=useState(0)
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  const [list, setList] = useState([])
  
  const getnavList=async(data)=>{
   
    let res =await Province['getprovincelist']()
    
    setList(res.data)
    console.log(list);
  }
  const [isModalOpen, setIsModalOpen] = useState(false);
  const confirm = async(id) => {
    console.log(id);
    // setList(list.filter(item => item.key !== e))
    let res = await Province['delprovince'](id)
    console.log(res);
    
    message.success('删除成功');
    getnavList()
  };
  const showModal = (title) => {
    setIsModalOpen(true);
  };
  const cancel = () => {
    message.error('取消删除');

  }

  const finish = async(values) => {
    // console.log(val);
    console.log(values);
    console.log(cateid);
    // setIsModalOpen(false);
    // list.filter(item=>{
    //   if(item.key===user.key){
    //     item.type=val.type
    //   }
    // })
    
      let res = await Province['changeprovince']({id:cateid,data:values})
        console.log(res);
    // if(res.code)
    getnavList()
    message.success('修改成功');
    setIsModalOpen(false);

  }
  const changeflag=async(row)=>{
      console.log(row);
      setFlag(row.flag)
      // console.log(flag);
      let res = await Province ['Cprovinceflag']({id:row.id,flag:row.flag})
      console.log(res);
      getnavList()
  }
  const show = (row) => {
    setIsModalOpen(true);
    console.log(row);
    setUser(row)
    setCateid(row.id)
    console.log(user);
  }
  // const valchange=(val)=>{
  //     console.log(val);
  //     setVal(val)
  //     console.log(val);
  // }
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  useEffect(()=>{getnavList()},[])

  const columns = [{
    title: "序号",
    render: (_, row, index) => <span>{index + 1}</span>
  },
  {
    title: "地址图片",
    render: (_, row, index) => <img  src={row.img}/>
  }
    ,
   {
    title: "地址名称",
    render: (_, row, index) => <span>{row.title}</span>
  }
    ,
  {
    title: "是否展示",
    render: (_, row, index) => <Switch defaultChecked={row.flag}  onChange={()=>changeflag(row)} ></Switch>

  }
    , {
    title: "操作",
    render: (_, row, index) => <div><Popconfirm

      title="删除？"
      description="确定要删除？"
      onConfirm={() => confirm(row.id)}
      onCancel={cancel}
      okText="是"
      cancelText="否"
    >
      <Button >删除</Button>

    </Popconfirm>
      <Button onClick={() => show(row)}>编辑</Button>

    </div>

  }

  ]
  
  const onFinish = async(values) => {
    setIsModalOpen(false);
      console.log(values);
    formRef.current?.resetFields();

    // setList([...list, { type: values.type, key: Date.now() }])
    message.success('添加成功')
    setOpen(false);
      let res =await Province['addprovince'](values)
      console.log(res);
      getnavList()
  }

  return (<>
    {/* onClick={()=>showModal('添加') */}
    <Button  style={{margin:'10px'}} type="primary" htmlType="submit" onClick={() => showDrawer()}>
      添加
    </Button>
    <Table rowKey='id' className={changeimg} columns={columns} dataSource={list} />
    <Modal title='编辑'
      footer={[]}
      open={isModalOpen} onCancel={handleCancel}>
      <Form
        // onValuesChange={valchange}
        key={user.id}
        initialValues={user}
        ref={formRef}
        onFinish={finish}
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}

        autoComplete="off"
      >
        <Form.Item
          label="房源类别"
          name="title"
          rules={[
            {
              required: true,
              message: '请添加房源类别',
            },
          ]}
        >
          <Input ></Input>
        </Form.Item>
        <Form.Item
          label="图片"
          name="img"
          rules={[
            {
              required: true,
              message: '请添加房源类别',
            },
          ]}
        >
          <Input ></Input>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Modal>
    <Drawer title="添加列表" placement="right" onClose={onClose} open={open}>
      <Form
        ref={formRef}
        onFinish={onFinish}
        name="basi"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}

        autoComplete="off"
      >
        <Form.Item
          label="房源类别"
          name="title"
          rules={[
            {
              required: true,
              message: '请添加房源类别',
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item 
          label="图片"
          name="img"
          rules={[
            {
              required: true,
              message: '请添加房源类别',
            },
          ]}
        >
          <Input  ></Input>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Drawer>
  </>)
}
export default Banner